<template>
    <div>
        <div class="crumbs">
            <el-form ref="form" :model="form" label-width="130px">
               <div class="container" style="position: relative;">
				   <div class="left">
					   <el-select v-model="xtList" @change="getname" value-key="id"  placeholder="" style="width:300px;mmargin-top:20px;margin-left:30px;">
					   	<el-option v-for="item in list" :key="item.id" :label="item.name" :value="item">{{item.name}}</el-option>
					   </el-select>

					   <el-checkbox-group
					       v-model="sendList"
						   style="margin: 30px 0px 0px 30px;height:500px;overflow: hidden;overflow-y: auto;"
					      >
					       <el-checkbox v-for="item in companyList" :label="item.id" :key="item.id" style="display: block;height:30px;">{{item.abbreviation}}</el-checkbox>
					     </el-checkbox-group>
				   </div>

				   <div class="right">
					    <el-input v-model="submitList.title" placeholder="请输入标题,最多16个字" class="handle-input mr10" maxlength="16"></el-input>
						<textarea v-if="submitList.type == 2" name="" id="" cols="150" rows="10" style="margin-top:30px;" placeholder="请输入广告词,最多50个字" v-model="submitList.content" maxlength="50"></textarea>
						<el-form-item label="上传图片" label-width="80px" style="margin-top:30px;" v-if="submitList.type == 1">
						    <el-upload
						        class="upload-poster"
						            action="https://jsonplaceholder.typicode.com/posts/"
						            :show-file-list="false"
						            :on-change="imgPreview"
						            :auto-upload="false">
						            <img v-if="headImg" :src="headImg" class="avatar">
						            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
						    </el-upload>
						</el-form-item>
				   </div>
			   </div>

			   <el-form-item class="footerFixed">
			       <el-button type="primary" @click="save">提交</el-button>
			       <el-button @click="backPage">返回</el-button>
			   </el-form-item>

            </el-form>
        </div>
    </div>
</template>

<script>
import axios from "axios"
import { app_listall_customapp,getCompanyByCustomAppId,advertSave,advertfindById } from '@/request/api';
export default {
    data() {
        return {
			headImg:'',
			sendList:[],
			form:{},
            logoImg: '',
            imageUrl: '',
			list:[],
			xtList:"",
			companyList:[],
			sendNameList:[],
		    submitList:{
				title:"",
				type:'2',
				content:"",
				sendObj:'',
				sendObjName:'',
				state:1,
				img:'',
				name:''
			},
			id:''
        };
    },
    mounted() {
		this.id = this.$route.query.id
		var type = this.$route.query.type
		if(type){
			this.submitList.type = type
		}
		this.get();
		// if(this.id){
		// 	// console.log(111)
		// 	this.init()
		// }

    },
    methods: {
		// 选择广告图片
		imgPreview(file,fileList) {
		    this.headImg =  URL.createObjectURL(file.raw);
		    let fileName = file.name;
		    let regex = /(.jpg|.gif|.png|.jpeg)$/;
		    if (regex.test(fileName.toLowerCase())) {
		        this.submitList.files = file.raw
		        this.submitList.img = file.name
		    } else {
		        this.$message.error('请选择图片文件');
		    }

		},

		init(){
			advertfindById(this.id).then((res)=> {
				this.submitList = res
				this.headImg =  this.$store.state.pathimg +this.submitList.img
				this.xtList = res.name
				console.log(this.list)
				for(var i = 0 ; i < this.list.length; i++) {
					console.log(this.list[i].name == this.xtList)
					if(this.list[i].name == this.xtList) {
						this.getname(this.list[i])
					}
				}
				this.sendList = this.submitList.sendObj.split(",")
			})
		},

		// 根据系统查询公司
		getname(e){

			this.sendList = []
			this.sendNameList = []
			this.submitList.name = e.name
			axios.get("http://47.108.220.160:90/jcApi/plant/usercenter/company/getCompanyByCustomAppId?customAppId="+e.id).then((res)=>{

				this.companyList = res.data.data
			})
		},
        get() {
			// 获取所有系统
			app_listall_customapp("").then((res)=>{
				this.list = res.data
				if(this.id){
					this.init()
				}
			})

        },


        backPage() {
            this.$router.go(-1);
        },
        save() {
			if(this.sendList.length == 0){
				this.$notify({
					title: '提示',
					message: '投放公司不能为空',
					type: 'info',
					duration: 1000
				});
				return false
			}
			if(this.submitList.title.length == 0){
				this.$notify({
					title: '提示',
					message: '标题不能为空',
					type: 'info',
					duration: 1000
				});
				return false
			}
			if(this.submitList.type == 2){
				if(this.submitList.content.length == 0){
					this.$notify({
						title: '提示',
						message: '广告内容不能为空',
						type: 'info',
						duration: 1000
					});
					return false
				}
			}
			if(this.submitList.type == 1){
				if(!this.submitList.img){
					this.$notify({
						title: '提示',
						message: '图片未上传',
						type: 'info',
						duration: 1000
					});
					return false
				}
			}

			this.sendNameList = []
			this.submitList.sendObj = this.sendList.join(",")
			for(var e = 0; e < this.companyList.length; e++){
				for(var r = 0; r < this.sendList.length; r++){
					if(this.companyList[e].id == this.sendList[r]){
						this.sendNameList.push(this.companyList[e].abbreviation)
					}
				}
			}
			this.submitList.sendObjName = this.sendNameList.join(",")
			// console.log(this.sendNameList)
			let data = this.submitList

			let formdata = new FormData()
			for(var a in data){
			    if(data[a] == null || data[a] == "null"){
			        data[a] = ""
			        formdata.append(a,'')
			    }else{
			        formdata.append(a,data[a])
			    }
			}
            advertSave(formdata).then((res)=>{
				this.$notify({
					title: '提示',
					message: '新增成功',
					type: 'success',
					duration: 1000
				});
				this.backPage()
			})
        }
    }
};
</script>

<style scoped>
.left{
	height:600px;
	width:400px;
	display: inline-block;
	/* border: 1px solid #000000; */
}
.right{
	height:600px;
	width:400px;
	display: inline-block;
	position: absolute;
	top:40px;
	left:480px;

}
.crumbs {
    width: 95%;
    margin: 0 auto;
    margin-top: 30px;
    background: #ffffff;
}

.lu {
    width: 8px;
    height: 16px;
    background: greenyellow;
}
.hnk {
    display: inline-block;
}
.jgxx {
    margin-left: 10px;
    font-weight: 600;
    font-size: 15px;
}
.jgcontainer {
    font-weight: 400;
}
.con {
    width: 40%;
    padding: 20px;
    font-size: 14px;
    margin-left: 20px;
}
.handle-input {
    width: 300px;
    display: inline-block;
    /* margin-left: 30px; */
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width: 180px;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.el-upload--text {
    width: 180px;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
